import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams, Label } from 'ionic-angular';
import { ParkDataProvider } from '../../providers/park-data/park-data';
import { Park } from '../../providers/park-data/park';
import { ParkDetailPage } from '../park-detail/park-detail';


//声明高德地图对象AMap
declare var AMap: any;

@Component({
  selector: 'page-park-map',
  templateUrl: 'park-map.html',
})
export class ParkMapPage {
  @ViewChild('map_container') map_container: ElementRef;

  private map: any;
  private parks: Park[] = [];
  private markers: any[] = [];

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public parkDataProvider: ParkDataProvider) {
  }

  ionViewDidLoad() {
    this.initAMap();
    // this.setMarker();
    this.setData();
  }

  initAMap(){
    this.map = new AMap.Map(this.map_container.nativeElement,{
    resizeEnable: true,
    zoom: 13,//级别
    //center: [116.397428, 39.90923],//中心点坐标
  });

  //加载插件
  AMap.plugin(['AMap.ToolBar','AMap.Geolocation'],()=>{n
    this.map.addControl(new AMap.ToolBar());
    let geolocation = new AMap.Geolocation();
    geolocation.getCurrentPosition((status,result)=>{
      console.log(`精确定位:${status}`);
      console.log(result);
    });
    geolocation.getCityInfo((status,result)=>{
      console.log(`城市定位:${status}`);
      console.log(result);
    });
    this.map.addControl();
  });
}

setMarker(parks: Park[]){
  parks = parks.slice(0,10);
  console.log(parks);

    parks.forEach(park => {
    let [lng, lat] = park.point.split(',');
    let marker = new AMap.Marker({
      position: new AMap.LngLat(lng, lat),
      title: park.name,
      label: {content: park.name, offset: new AMap.Pixel(20, -10)},
      clickable: true
    });
    marker.on('click', event=>{
      console.log(`点击经纬度: [${event.lnglat.getLat()},${event.lnglat.getLng()}]`);
      this.navCtrl.push(ParkDetailPage, {park: park});
    });
    this.markers.push(marker);
  });
  

  
  this.map.add(this.markers);
}

setData(){
  this.parkDataProvider.getCount().toPromise()
  .then(total => {
    console.log(`记录总数: ${total}`);
    return this.parkDataProvider.getAllParks(total).toPromise();
})
.then(data => {
   data.forEach(_parks => {
    this.parks = this.parks.concat(_parks);
   });
   console.log(`Parks集合大小: ${this.parks.length}`);
 });
}
}
